<template>
  <van-tabs v-model:active="value" @change="onChange">
    <van-tab
      v-for="item of list"
      :key="item.key"
      :name="item.key"
      :title="item.title"
    ></van-tab>
  </van-tabs>
</template>

<script lang="ts" setup>
  import { ref, defineEmits, computed, onMounted } from 'vue';
  import { useUserStore } from '@/store/index';

  const emit = defineEmits(['onChange']);
  const userStore = useUserStore();

  const { userType } = userStore;
  const list = computed(() => {
    if (userType === 'driver') {
      return [
        {
          title: '全部',
          key: -1,
        },
        {
          title: '待开始',
          key: 5,
        },
        {
          title: '进行中',
          key: 6,
        },
      ];
    }

    if (userType === 'dispatch') {
      return [
        {
          title: '全部',
          key: -1,
        },
        {
          title: '待审核',
          key: 1,
        },
        {
          title: '待调度',
          key: 2,
        },
        {
          title: '待结算',
          key: 11,
        },
      ];
    }

    if (userType === 'normal') {
      return [
        {
          title: '我的行程',
          key: 10,
        },
        {
          title: '进行中',
          key: 6,
        },
        {
          title: '已完结',
          key: 7,
        },
      ];
    }

    return [
      {
        title: '待审核',
        key: 1,
      },
      {
        title: '进行中',
        key: 6,
      },
      {
        title: '已完结',
        key: 7,
      },
    ];
  });

  const value = ref(list.value[0].key);
  const onChange = () => {
    emit('onChange', value.value);
  };

  onMounted(() => {
    onChange();
  });
</script>

<style lang="less" scoped></style>
